<template>
  <div>
    <div style='width:100%;height:100%' v-bind:id='id'></div>
    <span>{{ testdata2.name }}</span>
  </div>
</template>

<script>
import Echarts from 'echarts';
var echart1 = null;
export default {
  name: 'test',
  data () {
    return {
      d1: Number(1 === true),
      testdata2: { name: 'haha' }
    };
  },
  props: ['id', 'tdata'],

  mounted   () {
    this.changEcharts();
  },
  methods: {
    getOption (d) {
      const option = {
        color: ['#3a85ff', '#3a85ff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          // data:[d[0]],
          top: 5
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          top: 30,
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            // dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          },
          right: 220
        },
        xAxis: [
          {
            type: 'category',
            data: d[0],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: d[2],
            axisLabel: {
              formatter: p => `${p}`
            }
          }
        ],
        series: [
          {
            name: d[3],
            yAxisIndex: 0,
            type: 'line',
            barWidth: '60%',
            data: d[1],
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: '#00e9dd'
                // color: '#fff'
              }
            }
          }
        ]
      }
      return option;
    }
  },
  mounted () {
    // console.log('组件初始化完毕');
    this.testdata2.name = '';
    echart1 = Echarts.init(document.getElementById(this.id));
  },
  beforeUpdate () {
    var option = this.getOption(this.tdata);
    if (option) {
      echart1.setOption(option, true);
    }
  },
  watch: {
    tdata: function (d) {
      var option = this.getOption(d);
      echart1.setOption(option, true);
    }
  },
  computed: {
    comp1 () {
      return `${this.d1}`;
    }
  }
};
</script>
